<template>
  <a-col>
    <a-row class="tabs" :align="'middle'">
      <a-col
        v-for="tab in hasAuthTabs"
        :key="tab.key"
        :class="['tab', 'cursor', selectedTab === tab.key && 'tab--active']"
        @click="selectTab(tab.key)"
      >
        {{ tab.name }}
      </a-col>
    </a-row>
  </a-col>
</template>
<script lang="ts" setup>
  import { computed } from 'vue'

  import { checkKey } from '@/directives/auth'

  export interface Tab {
    name: string
    key: string
    auth?: string
  }

  // type Tabs = Tab[] | []
  interface Props {
    tabs: Tab[]
    selectedTab: string
  }

  let props = withDefaults(defineProps<Props>(), {
    tabs: () => [],
    selectedTab: ''
  })
  let emits = defineEmits(['changeTab'])

  const selectTab = (key: string) => {
    emits('changeTab', key)
  }
  const hasAuthTabs = computed(() =>
    props.tabs.filter(tab => {
      return checkKey(tab.auth || '')
    })
  )
</script>
<style lang="less" scoped>
  .tabs {
    display: flex;
    gap: 0 40px;

    .tab {
      height: 33px;
      font-size: 16px;
      color: @text02;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 400;
      user-select: none;
      line-height: 24px;

      &--active {
        position: relative;
        color: @text01;
        font-weight: 500;

        &::after {
          position: absolute;
          bottom: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 3px;
          background: @primary1;
          content: '';
        }
      }
    }
  }
</style>
